<template>
	<div class="fillcontain">
		<head-top></head-top>
		<div class="table_container">
			<!-- 条件查询 -->
			<el-autocomplete class="inline-input" v-model="keywords" :fetch-suggestions="querySearch" :trigger-on-focus="false"
			 prefix-icon="el-icon-search" placeholder="请输入关字内容"><template slot="prepend">关键字:</template></el-autocomplete>
			<br />
			<!--数据展示  -->
			<el-table :data="askeywords" highlight-current-row style="width: 100%">
				<el-table-column prop="id" width="50" sortable label="序号">
				</el-table-column>
				<el-table-column prop="keywords" label="关键字">
				</el-table-column>
				<el-table-column prop="customname" label="客户名称">
				</el-table-column>
				<el-table-column prop="agentname" label="代理商">
				</el-table-column>
				<el-table-column prop="serviceyears" width="50" label="申请年限">
				</el-table-column>
				<el-table-column sortable width="128" label="申请日期">
					<template slot-scope="scope">{{scope.row.regdatetime | moment('YYYY年MM月DD日')}}</template>
				</el-table-column>
				<el-table-column sortable width="128" label="到期日期">
					<template slot-scope="scope">{{scope.row.regpassdatetime | moment('YYYY年MM月DD日')}}</template>
				</el-table-column>
				<el-table-column label="申请到期状态">
					<template slot-scope="scope">{{scope.row.ispass | ispassFilter}}</template>
				</el-table-column>
				<el-table-column label="审核状态" width="75">
					<template slot-scope="scope">{{scope.row.checkstatus | checkstatusFilter}}</template>
				</el-table-column>
				<el-table-column label="使用状态" width="75">
					<template slot-scope="scope">{{scope.row.isuse | isuseFilter}}</template>
				</el-table-column>
				<el-table-column label="APP开通" width="75">
					<template slot-scope="scope">{{scope.row.openapp | openappFilter}}</template>
				</el-table-column>
				<el-table-column label="操作" width="180">
					<template slot-scope="scope">
						<el-button-group>
							<el-button type="primary" :disabled="!(scope.row.ispass==0&&scope.row.checkstatus==2&&scope.row.isuse==1&&scope.row.openapp==0)" size="mini" @click="openappcli(scope.$index, scope.row.id)" round>开通<i class="el-icon-mobile-phone el-icon--right"></i></el-button>
							<el-button type="primary" :disabled="scope.row.checkstatus!=2" @click="findmoney(scope.$index, scope.row.id)" size="mini" round>续费<i class="el-icon-s-shop el-icon--right"></i></el-button>
						</el-button-group>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<div class="block">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[5, 10, 15,20]"
				 :page-size="size" layout="total, sizes, prev, pager, next, jumper" :total="count">
				</el-pagination>
			</div>
		</div>
		<!-- 开通App -->
		<el-dialog title="开通APP" :visible.sync="dialogFormOpenAPP">
			<el-form :model="askeywordsObj">
				<el-form-item label="登陆账号:" :label-width="formLabelWidth">
					<el-input v-model="askeywordsObj.appusername" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="登陆密码:" :label-width="formLabelWidth">
					<el-input v-model="askeywordsObj.apppassword" autocomplete="off"></el-input>
				</el-form-item>
				<el-row class="row-bg" align="center">
					<el-col :span="4">
						<el-tag>关键词:</el-tag>
					</el-col>
					<el-col :span="6">
						<el-link :underline="false">{{askeywordsObj.keywords}}</el-link>
					</el-col>
					<el-col :span="4">
						<el-divider direction="vertical"></el-divider>
					</el-col>
					<el-col :span="4">
						<el-tag>企业名称:</el-tag>
					</el-col>
					<el-col :span="6">
						<el-link :underline="false">{{askeywordsObj.customname}}</el-link>
					</el-col>
				</el-row>
				<el-row class="row-bg" align="center">
					<el-col :span="4">
						<el-tag>价格:</el-tag>
					</el-col>
					<el-col :span="6">
						<el-link :underline="false">{{askeywordsObj.price}}</el-link>
					</el-col>
					<el-col :span="4">
						<el-divider direction="vertical"></el-divider>
					</el-col>
					<el-col :span="4">
						<el-tag>服务类型:</el-tag>
					</el-col>
					<el-col :span="6">
						<el-link :underline="false">{{askeywordsObj.producttype|productTypeFilter}}</el-link>
					</el-col>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormOpenAPP = false">取 消</el-button>
				<el-button type="primary" @click="saveOpenApp(askeywordsObj.id)">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 续费 -->
		<el-dialog title="欢迎续费" :visible.sync="dialogFormMoney">
			<el-form :model="askeywordsObj">
				<el-tag>当前账户余额为:</el-tag>
				<el-link :underline="false">¥:{{askeywordsObj.preregfrozenmoney}}</el-link>
				<el-row class="row-bg" align="center">
					<el-col :span="4">
						<el-tag>关键字:</el-tag>
					</el-col>
					<el-col :span="6">
						<el-link :underline="false">{{askeywordsObj.keywords}}</el-link>
					</el-col>
					<el-col :span="4">
						<el-divider direction="vertical"></el-divider>
					</el-col>
					<el-col :span="4">
						<el-tag>客户名称:</el-tag>
					</el-col>
					<el-col :span="6">
						<el-link :underline="false">{{askeywordsObj.customname}}</el-link>
					</el-col>
				</el-row>
				<el-form-item label="服务类别:" :label-width="formLabelWidth">
					<el-select v-model="AppleObj" placeholder="请选择服务类别">
						<el-option v-for="item in Appleli" :key="item.configvalue" :label="item.configtypename" :value="item.configvalue">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="服务年限:" :label-width="formLabelWidth">
					<el-select v-model="YareObj" placeholder="请选择年限">
						<el-option v-for="item in Yearli.configvalue" :key="item" :value="item" :label="item+'年'">
						</el-option>
					</el-select>
				</el-form-item>
				<el-tag>价格:</el-tag>
				<el-link :underline="false">{{sumprice}}</el-link>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormMoney = false">取 消</el-button>
				<el-button type="primary" @click="saveMoney(askeywordsObj.id)">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import headTop from '../components/headTop'
	import {
		baseUrl,
		baseImgPath
	} from '@/config/env'
	import {
		findasKeywordsPage,
		findOneasKeywords,
		updateasKeywords,
		insertasKeywords,
		findAll,
		findYear,
		findApple,
		updateAsAccountMoeny,
		insertasAccount,
		findasKeywordsAll,
		updateasKeywordsmeonyyear
	} from '@/api/getData'
	export default {
		data() {
			return {
				//年份对象
				YareObj: 0,
				//是否苹果对象
				AppleObj: {},
				//年份列表
				Yearli: {},
				//是否上传苹果商城列表
				Appleli: [],
				//总价格
				sumprice: 0,
				//续费对话框
				dialogFormMoney: false,
				//formLabelWidth
				formLabelWidth: '120px',
				//开通APP对话框
				dialogFormOpenAPP: false,
				//关键字对象
				askeywordsObj: {},
				//模糊查询关键字
				keywords: '',
				//所有关键词对象集合
				askeywords: [],
				//分页
				page: 0,
				size: 5,
				currentPage: 1,
				count: 0,
				//客户姓名集合
				devEuiArr: [],
				restaurants: [],
			}
		},
		//过滤器
		filters: {
			//申请到期状态过滤器
			ispassFilter: function(val) {
				if (val == 0) {
					return '未过期'
				} else if (val == 1) {
					return '预注册过期'
				} else if (val == 2) {
					return '正式注册过期'
				}
			},
			//审核状态过滤器
			checkstatusFilter: function(val) {
				if (val == 0) {
					return '已申请'
				} else if (val == 1) {
					return '审核中'
				} else if (val == 2) {
					return '已通过'
				} else if (val == 3) {
					return '未通过'
				}
			},
			//使用状态过滤器
			isuseFilter: function(val) {
				if (val == 0) {
					return '未使用'
				} else if (val == 1) {
					return '已使用'
				}
			},
			//app开通过滤器
			openappFilter: function(val) {
				if (val == 0) {
					return '未开通'
				} else if (val == 1) {
					return '已开通'
				}
			},
			productTypeFilter: function(val) {
				if (val == 1) {
					return '上传苹果商城'
				} else if (val == 2) {
					return '不上传苹果商城'
				}
			}
		},
		created() {
			this.initData();
		},
		computed: {
			...mapState(['adminInfo']),
		},
		components: {
			headTop,
		},
		//动态加载
		watch: {
			keywords: function(newValue) {
				this.initData();
			},
			YareObj: function() {
				this.Sumpricemth()
			},
			AppleObj: function() {
				this.Sumpricemth()
			},
            $route(to,from){
                if(to.path=="/AsKeywordsList"){
                  this.initData();
              }
            }
		},
		methods: {
			//总钱数
			Sumpricemth() {
				this.sumprice = parseInt(this.YareObj) * parseInt(this.AppleObj);
			},
			//确定打钱续费
			saveMoney(id) {
				if (this.sumprice > this.askeywordsObj.preregfrozenmoney) {
					this.$confirm('您的余额不足, 请充值!', '提示', {
						type: 'warning'
					}).then(() => {}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消续费'
						});
					});
				} else {
					this.$confirm('此操作将永久扣除资金, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.daqian();
						this.$message({
							type: 'success',
							message: '续费成功!'
						});
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消续费'
						});
					});
				}
				this.dialogFormMoney = false;
			},
			//续费处理
			async daqian() {
				this.askeywordsObj.preregfrozenmoney = this.askeywordsObj.preregfrozenmoney - this.sumprice
				await updateasKeywordsmeonyyear({
					...this.askeywordsObj,
					year: this.YareObj,
					userid:this.adminInfo.user.id,
					usercode:this.adminInfo.user.usercode
				})
                this.initData();
				await updateAsAccountMoeny(this.sumprice)
				await insertasAccount({
					userid: this.adminInfo.user.id,
					detailtypename: this.YareObj + "年" + this.sumprice + "元",
					money: this.sumprice,
					accountmoney: this.askeywordsObj.preregfrozenmoney,
					memo: this.adminInfo.user.username + '对' + this.askeywordsObj.customname + '进行关键性续费操作,扣除续费资金:' + this.YareObj +
						'年' + this.sumprice + '元'
				});
			},
			//保存开通APP
			async saveOpenApp(id) {
				this.askeywordsObj.openapp = 1;
				await updateasKeywords({...this.askeywordsObj,userid:this.adminInfo.user.id,usercode:this.adminInfo.user.usercode})
				this.dialogFormOpenAPP = false
			},
			//打开续费对话框
			async findmoney(index, id) {
				this.dialogFormMoney = true;
				const res = await findOneasKeywords(id);
				this.Yearli = await findYear();
				this.Yearli = this.Yearli[0];
				this.Yearli.configvalue = parseInt(this.Yearli.configvalue);
				this.Appleli = await findApple()
				this.askeywordsObj = res;
			},
			//打开开通app对话框
			async openappcli(index, id) {
				this.dialogFormOpenAPP = true
				const res = await findOneasKeywords(id);
				this.askeywordsObj = res;
			},
			//联想输入
			querySearch(queryString, cb) {
				var results = queryString ? this.devEuiArr.filter(this.createFilter(queryString)) : this.devEuiArr;
				// 调用 callback 返回建议列表的数据
				cb(results);
			},
			//联想输入过滤
			createFilter(queryString) {
				return (restaurant) => {
					return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1);
				};
			},
			//封装联想输入的数据
			async isfindall() {
				this.restaurants = await findasKeywordsAll();
				for (var i = 0; i < this.restaurants.length; i++) {
					this.devEuiArr.push({
						"value": this.restaurants[i].keywords
					})
				}
			},
			//初始化方法
			async initData() {
				try {
					const res = await findasKeywordsPage({
						page: this.currentPage,
						rows: this.size,
						keywords: this.keywords
					});
					this.count = res.total;
					this.askeywords = res.rows;
				} catch (err) {
					console.log('获取数据失败', err);
				}
			},
			//分页
			handleSizeChange(val) {
				this.size = val;
				this.initData()
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				this.page = (val - 1) * this.rows;
				this.initData()
			}
		},
	}
</script>

<style lang="less">
	@import '../style/mixin';

	.demo-table-expand {
		font-size: 0;
	}

	.demo-table-expand label {
		width: 90px;
		color: #99a9bf;
	}

	.demo-table-expand .el-form-item {
		margin-right: 0;
		margin-bottom: 0;
		width: 50%;
	}

	.table_container {
		padding: 20px;
	}

	.Pagination {
		display: flex;
		justify-content: flex-start;
		margin-top: 8px;
	}

	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #20a0ff;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 120px;
		height: 120px;
		line-height: 120px;
		text-align: center;
	}

	.avatar {
		width: 120px;
		height: 120px;
		display: block;
	}
</style>
